@import "../../../assets/styles/varibles";
@import "../../../assets/styles/mixins";
.home{
  .banner-item{
    display: block;
    width: 100%;
  }
  
 
  .main{
    .wrap{
      display: flex;
      justify-content: space-between;
      background-color: @white-color;
      box-sizing: content-box;
      border-left: 1px solid @border-color-base;
      border-right: 1px solid @border-color-base;
      .left{
        width: 726px;
        padding: 20px 20px 40px;
        .sec{
          .up{
            height: 35px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding: 0 10px 10px 10px;
            border-bottom: 2px solid @red-color;
            margin-bottom: 15px;
            .navs{
              display: flex;
              align-items: center;
              h2{
                font-size: @font-size-lgs;
                width: 120px;
                a:hover{
                  text-decoration: inherit;
                }
                i{
                  display: inline-block;
                  width: 15px;
                  height: 15px;
                  background-color: @white-color;
                  border:3px solid @red-color;
                  border-radius: 50%;
                  margin-right: 10px;
                }
              }
              .more{
                  width: 50px;
                  height: 35px;
              }
              nav {
                  width: 270px;
                  
                a {
                  display: inline-block;
                  padding: 0 12px;
                  border-right: 1px solid @border-color-base;
                  //margin-left: 15px;
                  &:last-child{
                    border-right: none;
                  }
                }
              }
            }
          }

          .down{
            .down-wrap{
              display: flex;
              flex-wrap: wrap;
              justify-content:space-between;
              .sheet-item{
                width: 140px;
                height:204px;
                margin-right: 42px;
                &:nth-of-type(4n){
                  margin-right: 0;
                }
              }
            }
          }
        }
      }
      .right{
        width: 250px;
         border-left: 1px solid #d3d3d3;
       
        .singer-box{
          width: 100%;
          font-size:12px;
          color:#333;
          padding:15px 20px 20px;
          
          .head{
            height: 24px;
            width: 210px;;
            display: flex;
            align-items: center;
            padding-bottom:10px;
            border-bottom:1px solid #ccc;
            justify-content: space-between;
            .title{
              font-weight:600;
              color:#333;
            }
            
          }
          .singers{
            width: 100%;
            padding-top:20px;
            // 歌手列表
            .singer-item{
              width: 210px;
              height:62px;
              margin-bottom:14px;
              .link{
                display: block;
                width: 100%;
                height: 100%;
                display: flex;
                text-decoration: none;
                .singer-img{
                  display: block;
                  width: 62px;
                  height: 100%;

                }
                .info{
                  padding-left:14px;
                  width: 148px;
                  border:1px solid #e9e9e9;
                  border-left:nonoe;
                  background:#fafafa;
                  .title{
                    font-size:14px;
                    font-weight:600;
                    color:#333;
                    margin:8px 0;
                  }
                  .dec{

                  }
                  &:hover{
                    background: #f4f4f4;
                  }
                }
              }
            }
          }
          .apply{
            width: 100%;
            height: 31px;
            color:#333;
            border-radius:4px;
            
            text-align:center;
            background:#fafafa;
            border:1px solid #bbb;
            box-shadow: 0 0 2px #bbb;
            a{
              display: inline-block;
              width: 100%;
              height: 100%;
              line-height:31px;
              font-weight:bold;
              text-decoration:none;
            }
          }
          
        }
        // width: 250px;
        // border-left: 1px solid @border-color-base;
        // .settled-singer{
        //   padding: 15px;
        //   background-color: @white-color;
        //   .tit{
        //     font-size: @font-size-sm;
        //     overflow: hidden;
        //     padding-bottom: 8px;
        //     border-bottom: 1px solid @border-color-base;
        //     b{
        //       float: left;
        //     }
        //     span{
        //       float: right;
        //     }
        //   }

        //   .list{
        //     overflow: hidden;
        //     .card{
        //       margin-top: 14px;
        //       width: 210px;
        //       height: 62px;
        //       background: #fafafa;
        //       cursor: pointer;
        //       .pic{
        //         float: left;
        //         width: 62px;
        //         height: 62px;
        //       }
        //       .txt{
        //         float: left;
        //         border: 1px solid #e9e9e9;
        //         padding-left: 14px;
        //         width: 147px;
        //         height: 62px;
        //         b{
        //           display: block;
        //           margin-top: 8px;
        //         }
        //         span{
        //           display: block;
        //           margin-top: 8px;
        //         }
        //       }
        //     }
        //   }
        // }
      }
    }
  }
}